<template>
  <el-form :model="role" :rules="rules" label-width="120px" ref="role">
    <div class="col-sm-12">
      <el-form-item label="编号" class="b-all">
        {{role.id}}
      </el-form-item>
    </div>
    <div class="line line-dashed line-xs pull-in"></div>
    <div class="col-sm-5">
      <el-form-item label="名称" prop="name" required>
        <el-input v-model="role.name" placeholder="请输入角色名称"></el-input>
      </el-form-item>
    </div>
    <div class="col-sm-5">
      <el-form-item label="类型" prop="types" required>
        <el-select v-model="role.types" style="width: 100%" :loading="ifParamsSelectLoad" filterable placeholder="选择类型">
          <el-option
            v-for="item in paramsOptions"
            :label="item.value"
            :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>
    </div>
    <div class="line line-dashed line-xs pull-in"></div>
    <div class="col-sm-10">
      <el-form-item prop="info" label="角色描述" required>
        <el-input type="textarea" v-model="role.info" placeholder="请输入角色描述"></el-input>
      </el-form-item>
    </div>
    <div class="line line-dashed line-xs pull-in"></div>
    <div class="col-sm-5">
      <el-form-item label="状态" required>
        <el-switch on-text="启用" off-text="禁用" v-model="role.state"></el-switch>
      </el-form-item>
    </div>
    <div class="col-sm-5">
      <el-form-item label="排序号" prop="sorter" required>
        <el-input v-model.number="role.sorter" placeholder="请输入排序号(-99.99~99.99)"></el-input>
      </el-form-item>
    </div>
    <div class="line line-dashed line-xs pull-in"></div>
    <div class="col-sm-5">
      <el-form-item label="创建人">
        {{role.creater}}
      </el-form-item>
    </div>
    <div class="col-sm-5">
      <el-form-item label="创建时间">
        {{role.creatTime}}
      </el-form-item>
    </div>
    <div class="line line-dashed line-xs pull-in"></div>
    <div class="col-sm-10">
      <el-form-item prop="memo" label="备注">
        <el-input type="textarea" v-model="role.memo" placeholder="请输入备注"></el-input>
      </el-form-item>
    </div>
    <div style="clear: both"></div>
    <footer class="panel-footer text-right bg-light lter">
      <div style="float: left;">
        <span class="badge bg-danger text-base textTs"></span>
      </div>
      <el-button v-auth="'VUser:tab:edit'" v-if="type=='edit'" type="primary" :loading="ifSub" @click="editSubmit()">
        提交修改
      </el-button>
      <el-button v-auth="'VUser:tab:add'" v-if="type=='add'" type="primary" :loading="ifSub" @click="addSubmit()">确认添加
      </el-button>
    </footer>
    <div style="display: none">{{editData_}}</div>
  </el-form>
</template>
<script>
  import {roleVo} from '../../../vo/sysRole'
  import Vue from 'vue'
  import {SERVICE_URLS} from '../../../../config/service.url'

  export default{
    props: ["type", "editData"],
    data(){
      return {
        ifParamsSelectLoad: false,
        deOptions: [],
        paramsOptions: [],
        role: roleVo(),
        ifSub: false,
        rules: {
          sorter: [
            {type: 'number', message: '排序号必须为数字', triggers: ['blur', 'change']},
            {type: 'number', min: -99.99, max: 99.99, message: '大小必须在 1 至 100 之间', triggers: ['blur', 'change']}
          ],
          name: [
            {required: true, message: '请输入姓名', triggers: ['blur', 'change']},
            {min: 1, max: 50, message: '长度在 1 到 50 个字符', triggers: ['blur', 'change']}
          ],
          info: [
            {required: true, message: '请输入角色描述', triggers: ['blur', 'change']},
            {min: 1, max: 200, message: '长度在 1 到 255 个字符', triggers: ['blur', 'change']}
          ],
          types: [{required: true, message: '类型不能为空', triggers: ['blur', 'change']}],
          memo: [
            {min: 0, max: 255, message: '长度在 0 到 255 个字符', triggers: ['blur', 'change']}
          ]
        }
      }
    },
    computed: {
      editData_(){
        if (this.type == "edit") {
          if (this.editData && this.editData.id) {
            this.role = this.editData;
          } else {
            //清空form
            if (this.$refs['role']) {
              this.$refs['role'].resetFields();
            }
          }
        }
        return {};
      }
    },
    created(){
      this.fetchDate();
    },
    methods: {
      fetchDate(){
        const self = this;
        //类型加载
        Vue.submit(self, {
          url: SERVICE_URLS.params.select,
          noTips: true,
          params: {
            id: "ff80808154aeb0350154aebb45280000"
          },
          loading: "ifParamsSelectLoad",
          callback(data){
            self.paramsOptions = data.body;
          }
        }, Vue)
      },
      addSubmit(){
        const self = this;
        Vue.submit(self, {
          formName: 'role',
          url: SERVICE_URLS.role.create,
          data: self.role,
          callback(data){
            //更新列表数据
            self.$emit('addSuccessState');
            //清空数据
            //self.$store.state.roleModule.addDialogRef.close();
            self.$refs['role'].resetFields();
          }
        }, Vue);
      },
      editSubmit(){
        const self = this;
        Vue.submit(self, {
          formName: 'role',
          url: SERVICE_URLS.role.update,
          data: self.role,
          params: {
            id: self.role.id
          },
          callback(data){
            //更新列表数据
            self.$emit('editSuccessState');
            //清空数据
            //self.$store.state.roleModule.editDialogRef.close();
            //self.$refs['role'].resetFields();
          }
        }, Vue);
      }
    }
  }
</script>
